<template>
	<view class="grid-box">
		<view class="grid-item" v-for="item in gridList">
			<image :src="item.image"></image>
			<view>{{item.title}}</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				gridList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '星辰'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '星辰'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '灵犀'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '灵犀'
					},{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '灵犀'
					},{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '灵犀'
					},{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '灵犀'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '西风'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '西风'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '西风'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '西风'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '西风'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.grid-box{
		margin: 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
	}
	.grid-item{
		margin: 30rpx;
		text-align: center;
	}
	.grid-item image{
		border-radius: 50%;
		height: 100rpx;
		width: 100rpx;
	}
</style>